import React from 'react';
import { TabBar } from 'antd-mobile';
import {Button, Input, Modal,Form ,message} from "antd"

import Body from '../Body/mobile_body';
import Header from '../Header/mobile_header'
import SaleButtom from '../../moblie_sale'


const Menu =[
    {
      title:"遛闲置", 
      url: "todo",
      icon:"UNQhIatjpNZHjVf",
      selected:"HLkBvJOKnmOfBPO",
    },
    
    {
      title:"卖闲置", 
      url: "list",
      icon:"YWpPVCVOnJoCYhs",
      selected:"WadBBxOIZtDzsgP",
    },
  
    {
      title:"我的", 
      url: "mine",
      icon:"EljxLrJEShWZObW",
      selected:"LWNaMdwAFSmYBFw",
    }
  
  ];

export default class Mobile_menu extends React.Component{
	constructor(props){
		super(props);
		this.state={
			selectedTab: 'todo',
			visible: false,
			confirmLoading : false
		}
	}
	  renderContent() {
		  return (
			<div>
				<Header/>
				<Body/>
				<SaleButtom/>
			</div>
		  );
	  };

	  renderMenu() {
		  let menus = [];
		  let i =0;
	
		  for(i=0;i<3; i++)
		  {
			let m = Menu[i];
			menus.push(
			<TabBar.Item
			  icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/'+m.icon+'.png' }}
			  selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/'+m.selected+'.png' }}
			  title={m.title}
			  key={m.url}
			  selected={this.state.selectedTab===m.url}
			  onPress={() => {
				this.setState({
				  selectedTab: m.url,
				});
			  }}
			>
				{this.renderContent()}
			</TabBar.Item>
			);
	
		  }
		  return menus;
	  };
	
	
	  render() {
	
		let menus = this.renderMenu();
	
		return (
		  <TabBar
			unselectedTintColor="#949494"
			tintColor="#33A3F4"
			barTintColor="white"
			className="menu_bottom"
		  >
		  {menus}
		  </TabBar>
		);
	  }
}